<script setup lang="ts">
import { ref, watch } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'

let route = useRoute();
let isShowTapbar = ref(true);
// 编写函数 拼接http图片路径  // image === home.png
const getAssetUrl = (image: string) => {
  // 参数一：相对路径 参数二：当前路径url  
  // ./static/tapbar/home.png
  return new URL(`./static/tapbar/${image}`, import.meta.url).href
}

// 动态设置导航
const tapbars = [
  {
    path: '/',
    text: '首页',
    iconDefault: 'home.png',
    iconActive: 'home_on.png',
    className: 'icon-home'
  },
  {
    path: '/my',
    text: '我的',
    iconDefault: 'my.png',
    iconActive: 'my_on.png',
    className: 'icon-my'
  }
]

// console.log(route)
// 观察路由的变化
watch(route, (newRoute)=> {
  // console.log(newRoute.meta.state)
  let state = newRoute.meta.state;


  // 此处控制是否显示底部tapbar栏
  if(state == 'home' || state == 'mine') {
    isShowTapbar.value = true;//显示
  }
  else {
    isShowTapbar.value = false;//隐藏
  }


  // if(state == 'login' || state == 'register') {
  //   isShowTapbar.value = false;
  // }
  // else {
  //   isShowTapbar.value = true;
  // }
}, 
// 深度侦听
{deep: true})


</script>

<template>
  <!-- 路由出口 -->
  <RouterView />

  <!-- 底部栏 tapbar -->
  <footer class="app-footer" v-if="isShowTapbar">
    <nav>
      <!-- 链接组件 -->
      <!-- <RouterLink to="/" active-class="active">
           <img src="" alt="">
           <p>首页</p>
        </RouterLink>
        <RouterLink to="/my" active-class="active">
          <img src="" alt="">
          <p>我的</p>
        </RouterLink> -->


      <!-- :style="`background-image: url(${getAssetUrl(item.iconDefault)})`" -->
      <!-- 路由导航 -->
      <RouterLink v-for="item in tapbars" :to="{ path: item.path }" active-class="active">
        <span :class="item.className"></span>
        <p>{{ item.text }}</p>
      </RouterLink>
    </nav>
  </footer>
</template>

<style scoped lang="scss">
@import './static/common/variable.scss';

.app-footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #fff;
  // border-top: 1px solid #ccc;
  box-shadow: 0 1px 2px #ccc;

  nav {
    width: 100%;
    display: flex;

    a {
      flex-grow: 1;
      text-align: center;
      text-decoration: none;
      color: #000;
      font-size: 18px;
      display: block;
      padding: 5px 0;

      // 控制文本 和 图标高亮
      &.active {
        color: $ActiveColor;

        .icon-home {
          background-image: url(./static/tapbar/home_on.png);
        }

        .icon-my {
          background-image: url(./static/tapbar/home_on.png);
        }
      }

      span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
      }

      // 默认图标
      .icon-home {
        background-image: url(./static/tapbar/home.png);
      }

      .icon-my {
        background-image: url(./static/tapbar/my.png);
      }
    }
  }
}</style>
